<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定侧边栏</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: blue;
			cursor:pointer;
			display: none;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        div img{
			width:100%;
		}
        .header {
            height: 100px;
        }
        
        .banner {
            height: 250px;
        }
        
        .main {
            height: 1000px;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
		.goBack{
			color: #fff;
			width: 45px;
			height: 130px;
			display: block;
			text-align: center;
			line-height: 130px;
		}
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回</span>
    </div>
    <div class="header w"><img src="images/header.png" alt=""></div>
    <div class="banner w"><img src="images/banner.png" alt=""></div>
    <div class="main w"><img src="images/main.png" alt=""><img src="images/main.png" alt=""></div>

	<script type="text/javascript">
		//返回按钮
		var sideBar = document.querySelector('.slider-bar');
		var banner = document.querySelector('.banner');
		var main = document.querySelector('.main');
		
		//banner距离顶部的距离
		var bannerTop = banner.offsetTop;
		
		//给页面绑定scroll事件
		document.addEventListener('scroll',function(e){
			//console.log('scroll...');
			console.log("被卷去的页面TOP::"+window.pageYOffset);
			console.log('BannerTOP::'+bannerTop);
			if(window.pageYOffset>=bannerTop){
				console.log('固定...');
				//定位属性
				sideBar.style.position = 'fixed';
				sideBar.style.top = 500+'px';
			}else{
				console.log('绝对...');
				sideBar.style.position = 'absolute';
				sideBar.style.top = 500+'px';
			}
			
			//当到main地界,让返回按钮出来
			if(window.pageYOffset>main.offsetTop){
				sideBar.style.display = 'block';
			}else{
				sideBar.style.display = 'none';
			}
			
		});
		
		sideBar.addEventListener('click',function(e){
			//把body元素的scrollTop设置为0
			document.body.scrollTop = 0;
			//把html根标签的scrollTop设置为0
			document.documentElement.scrollTop =0;
		});
		
		
	</script>

</body>

</html>
